<style scoped>
	.container{
		position: relative;
	}
	.showimg>img{
		max-width: 100%;
		min-width: 100%;
		font-size: 0;
	}
	.left {
			position: relative;
	    display: inline-block;
	    width: 60%;
	    padding: 0;
	    margin: 0;
	    float: left;
	    text-align:justify;
	}

	.right {
	    display: inline-block;
	    width: 40%;
	    margin: 0;
	    padding: 0;
	}
	.starts {
    width: 92%;
    position: absolute;
    bottom: 10px;
    left: 4%;
	}

	.placeDesc {
	    margin-left: 10px;
	    font-size: 12px;
	}
	.startNumber {
	    display: inline-block;
	    color: white;
	    float: right;
	}

	.start {
	    display: inline-block;
	    color: #FDB53B;
	}
	.user {
	    position: relative;
	    display: inline-block;
	    margin-top: 15px;
	}

	.showimg {
	    position: relative;
	}
	.nickname {
	    display: inline-block;
	    font-size: 12px;
	}

	.committime {
			margin-top: 15px;
	    display: inline-block;
	}
	.placeDesc .name {
	    font-size: 16px;
	    color: black;
	}

	.peaples {
	    margin-top: 10px;
	}

	.bestFestival {
	    margin-top: 10px;
	}
	.interaction {
    position: absolute;
    bottom: 35px;
    margin-left: 30px;
	}
	.placelist{
		margin-top: 20px;
		background:#fff;
	}
	.user>img.headimg {
    border-radius: 50%;
	}
</style>
<template>
<div v-for="campPlace in campPlaces" class="placelist">
	<div style="margin-top:15px;">
	    <a v-link="{name:'campdetail',params:{index:$index}}">
	        <div class="container">
	            <div class="left">
	                <div class="showimg">
	                    <img src="../resource/images/camp/showimg.jpg" alt="">
	                    <div class="starts">
	                        <div class="start">
	                            <span class="glyphicon glyphicon-star"></span>
	                            <span class="glyphicon glyphicon-star"></span>
	                            <span class="glyphicon glyphicon-star"></span>
	                            <span class="glyphicon glyphicon-star"></span>
	                            <span class="glyphicon glyphicon-star"></span>
	                        </div>
	                        <div class="startNumber">{{campPlace.starts|toFixed 1}}</div>
	                    </div>
	                </div>
	                <div class="user">
	                    <img :src="campPlace.ownerInfo.headimgurl" height="40" width="40" alt="" class="headimg">
	                    <div class="nickname">{{campPlace.ownerInfo.nickname}}</div>
	                </div>
	                <div class="committime"><span class="glyphicon glyphicon-time" style="font-size:12px;"></span><span style="font-size:12px;margin-left:5px;">昨天</span><span style="font-size:12px;">15:20</span></div>
	                <i style="display:inline-block;width:100%;height:0;"></i>
	            </div>
	            <div class="right">
	                <div class="placeDesc">
	                    <div class="name">{{campPlace.name}}</div>
	                    <div class="peaples"><img src="../resource/images/camp/peaplescount.png" height="16" width="16"><span style="margin-left:.5em;margin-right:.5em;">可搭帐篷数</span><span>{{campPlace.campcount}}</span></div>
	                    <div class="bestFestival"><img src="../resource/images/camp/bestFestival.png" height="16" width="16"><span style="margin-left:.5em;margin-right:.5em;">最佳季节</span><span>{{campPlace.bestseason}}</span></div>
	                    <div class="interaction"><img src="../resource/images/camp/like.png" height="17" width="18"><span style="margin-left:5px">{{campPlace.likes.length}}</span><img src="../resource/images/camp/comment.png" height="17" width="20" style="margin-left:20px;"><span style="margin-left:5px">{{campPlace.comment}}</span></div>
	                </div>
	            </div>
	        </div>
	    </a>
	</div>
</div>

</template>
<script type="text/javascript">
	var storage = window.localStorage;
	var async = require('async');
	module.exports = {
		data:function(){
			return {
				campPlaces:[]
			}
		},
		ready:function(){
			var vue = this;
			async.waterfall([
				function(cb){
					vue.$http.get("/camp/getInfo").then(function(res){
						res.json().map(function(campPlace){
							vue.$http.get('/camp/user/getInfoById',{params:{id:campPlace.ownerId}}).then(function(res){
								campPlace.ownerInfo = res.json()[0];
								vue.campPlaces.push(campPlace);
								cb(null,vue.campPlaces)
							});
						});
					},function(err){
						cb(new Error(err));
					});
				},
				function(campPlaces){
					storage.setItem("campPlaces",JSON.stringify(campPlaces));
				}
			]);
		}
	}
</script>